<template>
  <div>
    <!-- 计算属性相关注释说明 -->
    <!-- 在computed中可以定义一些属性，这些属性叫做【计算属性】。计算属性的本质就是一个方法，只不过我们在使用这些计算属性的时候是把它们的名称直接当作属性来使用的，并不会把计算属性当作方法去调用。  

    注意1：计算属性在引用的时候，一定不要加()去调用，直接把它当作普通属性去使用就好了；  
    注意2：在计算属性的function中所用到的任何data中的数据发送了变化，就会立即重新计算这个计算属性的值  
    注意3：计算属性的求值结果会被缓存起来，方便下次直接使用。   -->
    <input type="text" v-model="firstname" /> + 
    <input type="text" v-model="lastname" /> = 
    <input type="text" v-model="fullname" />
    <br>
    {{firstname}} + {{lastname}} = {{fullname}}
    <br>
    {{fullname}}
    <br>
    <input type="button" value="修改计算属性" @click="modify">

    {{USD2(2000)}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstname: "",
      lastname: ""
    }
  },
  // computed属性的作用：此时计算的属性是由data中声明的属性推导而来，所以称为“计算属性”
  computed: {
    //方法一
    // fullname() {
    //   return this.firstname + this.lastname
    // }
    //方法二
    fullname:{
        get(){
            console.log("get调用")
            return this.firstname+"_"+this.lastname
        },
        set(newValue){
            console.log("set调用",newValue)
        }
    },
    //给计算属性传参
    USD2(){
        return value=>{
            return "$"+value;
        };
    }
  },
  methods:{
    modify(){
        this.fullname="nnnnnnn"
    }
  }
}
</script>

<style scoped>

</style>